.platform-line {
  background-color: rgba(255, 255, 255, 0.5);
  height: 0.16rem;
  width: 1px;
  transform: scaleX(0.2);
  display: inline-block;
  margin-left: 0.32rem;
  margin-right: 0.32rem;
}
.lightGrayColor {
  color: #b2b2b2;
}
.M3X-subtitle {
  color: rgba(255, 255, 255, 0.8);
}
.m3xborderColor {
  border-bottom: 1px solid #000;
}
@keyframes zoomInOut {
  0% {
    /* transform: scale(1.1); 初始时放大到1.2倍  
    opacity: 0.9; 可选，增加一些透明度变化效果   */
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1); /* 动画结束时恢复到原始大小 */
    opacity: 1; /* 可选，透明度恢复到1 */
  }
}

@keyframes _opacity {
  0% {
    opacity: 0; /* 可选，增加一些透明度变化效果 */
  }
  100% {
    opacity: 1; /* 可选，透明度恢复到1 */
  }
}

.pc-screen-dom {
  width: 100%; /* 或其他宽度设置 */
  /* height: auto; 保持图片的原始宽高比   */
  animation: zoomInOut 0.5s ease-in-out; /* 应用动画，持续时间2秒，使用缓入缓出效果 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧的状态 */
  animation-delay: 100ms;
}

@keyframes _h1_title {
  0% {
    margin-top: 5.5rem; /* 初始时放大到1.2倍 */
    opacity: 0; /* 可选，增加一些透明度变化效果 */
  }
  100% {
    margin-top: 2.5rem; /* 动画结束时恢复到原始大小 */
    opacity: 1; /* 可选，透明度恢复到1 */
  }
}

@keyframes _h3_title {
  0% {
    margin-top: 2.2rem; /* 初始时放大到1.2倍 */
    opacity: 0; /* 可选，增加一些透明度变化效果 */
  }
  100% {
    margin-top: 0.2rem; /* 动画结束时恢复到原始大小 */
    opacity: 1; /* 可选，透明度恢复到1 */
  }
}
@keyframes fade_in {
  0% {
    opacity: 0; /* 可选，增加一些透明度变化效果 */
    transform: scale(0);
  }
  80% {
    transform: scale(1.05);
    opacity: 1; /* 可选，透明度恢复到1 */
  }
  100% {
    transform: scale(1);
    opacity: 1; /* 可选，透明度恢复到1 */
  }
}

.h1_title {
  /* 大标题：默认 */
  animation: _h1_title 0.5s ease-in-out; /* 应用动画，持续时间2秒，使用缓入缓出效果 */
  /* animation-fill-mode: forwards; 动画结束后保持最后一帧的状态  */
}
.h3_title {
  /* 大标题：默认 */
  animation: _h3_title 1s ease-in-out;
  /* animation-fill-mode: forwards;   */
}
.fade_in {
  animation: fade_in 0.5s ease-in-out forwards;
}

.loading-background {
  background-position: center; /* 背景图居中 */
  background-repeat: no-repeat; /* 背景图不重复 */
  background-size: cover; /* 背景图覆盖整个元素 */
  transition: background-size 2s ease-in-out; /* 背景图变化的过渡动画 */
}

/* 当元素完全加载后，移除背景图效果 */
.loading-background.loaded {
  background-size: 100% 100%; /* 背景图不再缩放 */
  transition: background-size 0s; /* 移除过渡动画 */
}

@keyframes _color {
  0% {
    color: #fff;
  }
  100% {
    color: var(--color-text-h3);
  }
}
@keyframes _color_WhiteToBlack {
  0% {
    color: #1a1a1a;
  }
  100% {
    color: #ffffff;
  }
}
@media screen and (min-width: 768px) {
  .hover-bg {
    /* animation: _opacity 1s ease-in-out; 应用动画，持续时间2秒，使用缓入缓出效果   */
    animation-fill-mode: forwards;
    overflow: hidden;
  }
  .hover-bg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: 0.3s;
    z-index: -1;
    /* opacity: 0.3; */
    transform-origin: left;
  }
  .hover-bg:hover {
    /* animation: var(--color-text-h3);  */
    animation: _color 1s ease-in-out; /* 应用动画，持续时间2秒，使用缓入缓出效果 */
    animation-fill-mode: forwards;
  }

  .hover-bg:hover::after {
    background-color: #fff;
    transform: scaleX(1);
    color: var(--color-text-h3);
    animation: LeftToRight 0.5s ease-in-out;
  }
  .hover-bg-black {
    /* animation: _opacity 1s ease-in-out; 应用动画，持续时间2秒，使用缓入缓出效果   */
    animation-fill-mode: forwards;
    overflow: hidden;
  }
  .hover-bg-black::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: 0.3s;
    z-index: -1;
    /* opacity: 0.3; */
    transform-origin: left;
  }
  .hover-bg-black:hover {
    /* animation: var(--color-text-h3);  */
    animation: _color_WhiteToBlack 1s ease-in-out; /* 应用动画，持续时间2秒，使用缓入缓出效果 */
    animation-fill-mode: forwards;
  }

  .hover-bg-black:hover::after {
    background-color: #1a1a1a;
    transform: scaleX(1);
    color: #ffffff;
    animation: LeftToRight 0.5s ease-in-out;
  }
  .hover-bg-blue {
    /* animation: _opacity 1s ease-in-out; 应用动画，持续时间2秒，使用缓入缓出效果   */
    animation-fill-mode: forwards;
    overflow: hidden;
  }
  .hover-bg-blue::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: 0.3s;
    z-index: -1;
    /* opacity: 0.3; */
    transform-origin: left;
  }
  .hover-bg-blue:hover {
    /* animation: var(--color-text-h3);  */
    background-color: transparent;
    animation: #ffffff 1s ease-in-out; /* 应用动画，持续时间2秒，使用缓入缓出效果 */
    animation-fill-mode: forwards;
  }

  .hover-bg-blue:hover::after {
    background-color: #26b7bc;
    transform: scaleX(1);
    color: #ffffff;
    animation: LeftToRight 0.5s ease-in-out;
  }
}
@keyframes LeftToRight {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.eox-subtitle {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.frameImgeFit {
  -o-object-fit: unset;
     object-fit: unset;
  /* object-fit: fill; */
}
.car-justify-unset {
  justify-content: unset !important;
}
.seventh-border-center {
  margin: 0 auto;
}
.et-bev-swiper-desc {
  display: flex;
  align-items: center;
}
.et-bev-swiper-desc > span {
  margin-right: 0.12rem;
  display: inline-block;
  line-height: 1.5;
}
.et-bev-swiper-desc > span:last-child {
  background-color: #fff;
  width: 0.01rem;
  height: 0.14rem;
}
.et-bev-swiper-desc:last-child > span:last-child {
  display: none;
}
.et-bev-swiper-desc-mobile > span {
  margin-right: 0;
}
.lanyuecdm-subTitle > span:last-child {
  background-color: #4D4D4D;
}
.et-new-subTitle > span:last-child {
  background-color: #B2B2B2;
}
.et-awd-play-btn {
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  transform: translate(-50%);
  top: 50%;
  left: 50%;
  cursor: pointer;
}
.es-enhanced-line {
  background-color:rgba(255, 255, 255, 0.7);
  width: 0.01rem;
  height: 0.48rem;
  margin-right: 0.4rem;
  margin-left: 0.4rem;
}
.es-enhanced-line:last-child {
  background-color: unset;
  margin-right: 0;
}
.es-enhanced-h5-line:nth-child(odd) {
  border-right: 0.5px solid rgba(255, 255, 255, 0.7);
}
.es-enhanced-h5-line {
  background-color: rgba(255, 255, 255, 0.7);
  width: 0.01rem;
  height: 0.48rem;
}
@media (max-width: 1024px) {
  .eox-subtitle {
    color: #fff;
    line-height: 0.21rem;
  }
  .frame-only-mobile {
    display: flex;
    justify-content: center;
  }
  .car-frame1 {
    justify-content: unset !important;
  }
  .frameImgeFit {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .car-frame2-subtitle {
    color: #fff;
  }
  .AI-banner2-h5 {
    width: calc(100% - 0.4rem);
    margin:0 auto;
  }
  .performance-img-center {
    margin: 0 auto;
  }
  .swiper-img {
    /* width: calc(100% - 0.24rem); */
    margin: 0 auto;
    width: 3.2rem;
    -o-object-fit: contain;
       object-fit: contain;
    /* height: 581px; */
  }
  .es-enhanced-1 .group:nth-child(3) > .es-enhanced1-h5 {
    display: none;
  }
  .es-enhanced-1 .es-line-transform-4 {
    transform: translateX(0.08rem);
  }
}
@media (min-width: 1024px) {
  .performanc-cdc-content:last-child > div:last-child {
    width: 3.8rem;
  }
  .car-performance1 {
    align-items: flex-start;
    padding-left: 2.6rem;
  }
  .vertical-text {
    writing-mode: vertical-rl;
  }
  .yt-content:first-child > .hds-title {
    padding-left: 1.7rem;
  }
  .yt-content:first-child > .hds-title2 {
    padding-left: 0;
  }
  .AIBanner2Class {
    max-width: 10rem;
  } 
}
.apply-condition-img {
  position: relative;
  width: 2.08rem;
  height: 5.2rem;
  margin-right: .12rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  transition: all .3s ease;
  overflow: hidden;
}
.apply-condition {
  padding: 0 2.6rem 0.6rem 2.6rem;
}
.apply-condition-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 14rem;
  margin: 0 auto
}
.cardActive {
  width: 5.2rem; /* 鼠标移入后放大 */
}
.apply-condition-content {
  position: absolute;
  top: .24rem;
  padding: 0 .24rem;
}
.apply-condition-img .desc-show {
  opacity: 0;
  /* visibility: hidden; */
  transition: none;
}
.cardActive .desc-show {
  opacity: 1;
  /* visibility: visible; */
  /* transition: all .3s ease 0.3s; */
  animation: descSlideUp 0.7s ease-in-out forwards;
}
@keyframes descSlideUp {
  from {
    opacity: 0;
    /* transform: translateY(30px);   */
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-layout .slide-box {
  display: flex;
  overflow: scroll;
  scrollbar-width: none;
  text-align: left;
  padding-left: 0.2rem;
}
.slide-layout .slide-box .img-content-wrapper {
  flex-shrink: 0;
  margin-right: .16rem;
  width: 3.1rem;
}
.slide-layout .img-list .img-content-wrapper img {
  width: 100%;
  height: 3.1rem;
  margin-bottom: .24rem;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 1600px) {
  .apply-condition {
    padding: 0 1.2rem 0.6rem 1.2rem !important;
  }
}
/* .desc-content {
  transition: all .6s ease 0.3s;
} */
/* @media only screen 
and (device-width: 414px) 
and (device-height: 736px) 
and (-webkit-device-pixel-patio: 3) {
    .new-toEt {
      bottom: 19% !important;
    }
}
@media only screen and (max-width: 375px) {
  .new-toEt {
    bottom: 19% !important;
  }
}
@media only screen and (max-width: 320px) {
  .new-toEt {
    bottom: 23% !important;
  }
}
@media only screen 
and (device-width: 414px) 
and (device-height: 736px) 
and (-webkit-device-pixel-ratio: 3) {
  .new-toEt {
    bottom: 19% !important;
  }
} */
